<template>
	<view class="detail">
		<uv-navbar title="" bg-color="transparent" autoBack="true" leftIconColor="#fff" height="0"></uv-navbar>
		<view class="d-img">
			<image :src="details.dt.img" mode="aspectFill"></image>
		</view>
		<view class="d-content">
			<view class="j1">
				<view class="title" style="display:flex;">
					<text style="margin-right:7px;font-size:17px">{{ details.dt.title }}</text>
					<uv-tags text="5A级景区" size="mini" shape="circle"></uv-tags>
				</view>
				<view class="j2">
					<view style="font-size:14px;font-weight:700">景区介绍</view>
					<view class="d-introduce">{{ details.dt.introduce }}</view>
				</view>
				<view class="j3">
					<view class="j2">
						<text style="font-size:14px;font-weight:700">开放时间：</text>
						<view class="d-times">{{ details.dt.times }}</view>
					</view>
				</view>
				<view class="j4">
					<view class="tit" style="font-size:34rpx">游玩推荐</view>
					<view class="j5">
						<view class="item" v-for="(item,index) in projectList" :key="index" @click="goLine(item)">
							<image :src="item.url" mode="aspectFill"></image>
							<view class="topFixed">{{ item.tag }}</view>
							<view class="infos">
								<view class="tit">{{ item.title }}</view>
								<view class="desc">
									<uv-icon name="map" color="#9c9c9c" size="16"></uv-icon>
									<text class="text">{{ item.desc }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref,reactive } from 'vue'
	import { detailProject } from '../../api/api.js'
	
	const details=reactive({
		dt:''
	})
		
	const projectList=ref([])
	
	onLoad((opt)=>{
		detailProject().then(res=>{
			projectList.value=res
		})
		details.dt=JSON.parse(decodeURIComponent(opt.item))
	})
	
	const goLine=(item)=>{
		uni.navigateTo({
			url:`/pages/line/line?id=${item.id}`
		})
	}
</script>

<style lang="scss">
.detail {
  margin: 0; padding: 0;
  background-color: #f5f5f5;
  // 解决顶部导航栏穿透问题（可选）
  padding-top: var(--status-bar-height);

  // 顶部图片区域
  .d-img {
    width: 100%;
    // 图片容器需单独设置，避免影响内部图片
    image {
      width: 100%;
      height: 600rpx;
      display: block; // 去除图片底部默认间隙
	  position: relative; 
	  top: 0;
    }
  }

  // 核心修复：将 d-content 移出 d-img 嵌套，作为 detail 的直接子元素
  .d-content {
    width: 100%;
    // 去掉固定高度，让内容自适应
    // height: 700rpx; 
    margin-top: -40rpx; // 向上偏移，与图片重叠形成层次感
    background-color: #fff;
    padding: 35rpx 30rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0; // 修复：左上角和右上角圆角
    position: relative;
    z-index: 9;

    .j1 {
      // 去掉过大的底部margin，避免内容被挤出
      // margin-bottom: 300rpx;

      .title {
        font-size: 36rpx;
        font-weight: 700; // 修复：原代码拼写错误 fon-weight
        color: #111;
        margin-bottom: 30rpx;
        align-items: center; // 让文字和标签垂直居中
      }

      .j2 {
        margin-bottom: 25rpx; // 增加段落间距
        .d-introduce, .d-times {
          font-size: 26rpx;
          color: #8a8a8a;
          line-height: 40rpx;
        }
      }

      .j4 {
        margin-top: 30rpx;
        .tit {
          font-size: 34rpx;
          margin-bottom: 20rpx;
          color: #111;
          font-weight: 700;
        }

        .j5 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .item {
            position: relative;
            width: 48%;
            margin-bottom: 20rpx;
            box-shadow: 1px 2px 3px #e5e5e5;
            border-radius: 20rpx; // 统一圆角
            overflow: hidden;

            .topFixed {
              position: absolute;
              top: 0;
              left: 0;
              border-top-left-radius: 20rpx;
              border-bottom-right-radius: 20rpx;
              color: #fff;
              background-color: #ffaa7f;
              text-align: center;
              font-size: 22rpx;
              padding: 5rpx 20rpx;
              box-sizing: border-box;
              z-index: 1; // 确保标签在图片上方
            }

            image {
              width: 100%;
              height: 200rpx;
              display: block;
            }

            .infos {
              padding: 15rpx;

              .tit {
                font-size: 28rpx;
                font-weight: 700;
                color: #111;
                margin-bottom: 10rpx;
                white-space: nowrap; // 单行显示
                overflow: hidden;
                text-overflow: ellipsis; // 超出部分省略
              }

              .desc {
                display: flex;
                align-items: center;

                .text {
                  font-size: 24rpx; // 稍小一点更协调
                  color: #8a8a8a;
                  margin-left: 5rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>